<template>
    <div class="nav">
        <ul class="uu-nav">
            <li class="logo">美食汇</li>
            <li class="nav-lists" @click="indexFoot"><a href="javascript:">首页</a> </li>
            <li class="nav-lists" @click="addFoot"><a href="javascript:">推荐美食</a> </li>
            <li class="nav-lists" @click="listFoot"><a href="javascript:">美食列表</a> </li>
            <li class="nav-lists" @click="health"><a href="javascript:">饮食健康</a> </li>
            <li class="nav-lists" @click="about"><a href="javascript:">关于我们</a> </li>
        </ul>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()

const indexFoot = () => {
    router.push("/food-index")
}

const listFoot = () => {
    router.push("/food-list")
}

const about = () => {
    router.push("/about")
}

const health = () => {
    router.push("/health")
}

const addFoot = () => {
    router.push("/food-add")
}


</script>

<style scoped>
.nav {
    position: relative;
    width: 100%;
    height: 80px;
    transition: .8s ease;
    margin-bottom: 30px;
    background-color: rgba(255, 87, 34, .7);
}

.nav ul {
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

.nav ul li {
    float: left;
    width: 140px;
    height: 100%;
    color: white;
    text-align: center;
    line-height: 80px;
    cursor: pointer;
}

.nav ul li:hover {
    transition: 0.7s;
    background-color: rgba(248, 110, 68, 0.7);
}

.nav ul li a {
    color: white;
}

.nav ul .logo {
    width: 300px;
    background: none;
    text-align: center;
    font-size: 34px;
    font-weight: 700;
}
</style>